<template>
  <el-dialog
    :model-value="showGoodsDialog"
    title="秒杀商品选择"
    width="1200"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <art-table
      :data="goodsData"
      :currentPage="form.pageNum"
      :pageSize="form.pageSize"
      :total="form.pageTotal"
      @current-change="currentChange"
      @size-change="sizeChange"
      :height="500"
    >
      <el-table-column label="活动名称" prop="activityName" />
      <el-table-column label="秒杀时间" prop="publishTime">
        <template #default="scope"> {{ scope.row.startTime }}~{{ scope.row.endTime }} </template>
      </el-table-column>
      <el-table-column label="活动状态" prop="activityStatus" align="center">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.activityStatus === 1">进行中</el-tag>
          <el-tag type="info" v-if="scope.row.activityStatus === 0">未开始</el-tag>
          <el-tag type="warning" v-if="scope.row.activityStatus === 2">已结束</el-tag>
          <el-tag type="danger" v-if="scope.row.activityStatus === 3">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="createTime" />
      <el-table-column label="操作">
        <template #default="scope">
          <div
            class="select-button"
            :class="{ active: scope.row.id === selectCustomId }"
            @click="setActive(scope.row)"
          >
            {{ scope.row.id === selectCustomId ? '已选' : '选择' }}
          </div>
        </template>
      </el-table-column>
    </art-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { activityGetPage } from '@/api/marketing'

  const props = defineProps({
    showGoodsDialog: {
      type: Boolean,
      default: false
    },
    defaultActiveId: {
      type: String
    }
  })

  const form = reactive({
    pageNum: 1,
    pageSize: 10,
    pageTotal: 0
  })

  const emit = defineEmits(['closeDialog'])
  const goodsData = ref([])
  const selectGoods = ref([])
  const selectCustomId = ref()

  async function getGoodsData() {
    try {
      const res = await activityGetPage({
        pageNum: 1,
        pageSize: 10,
        activityType: '05'
      })
      if (res.code === '00000') {
        goodsData.value = res.data.list
        form.pageTotal = res.data.total
      }
    } catch (e) {
    } finally {
    }
  }

  function setActive(row: any) {
    if (selectCustomId.value === row.id) {
      selectCustomId.value = ''
    } else {
      selectCustomId.value = row.id
      selectGoods.value = row
    }
  }

  function currentChange(val: number) {
    form.pageNum = val
    getGoodsData()
  }
  function sizeChange(val: number) {
    form.pageSize = val
    form.pageNum = 1
    getGoodsData()
  }

  function closeDialog() {
    emit('closeDialog')
  }

  function handleConfirm() {
    emit('closeDialog', selectGoods.value)
  }

  onMounted(() => {
    if (props.defaultActiveId) {
      selectCustomId.value = props.defaultActiveId
    }

    getGoodsData()
  })
</script>

<style scoped lang="scss">
  .table-img {
    width: 48px;
    height: 48px;
  }

  .select-button {
    display: inline-block;
    padding: 6px 24px;
    border: 1px solid var(--el-color-primary);
    border-radius: 12px;
    color: var(--el-color-primary);
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }

  .select-button.active {
    background-color: var(--el-color-primary);
    color: white;
  }
</style>
